<template>
    <UxDialog class="guide-dialog dialog-responsive" :visible="value" @close="close()">
        <div class="guide">
            <h2>Size guide</h2>
            <h3>Size chart</h3>
            <article class="product-detail-expound-size">
                <div class="tablebox-radio">
                    <span :class="{ 'active': radio1 == 'Imperial' }" @click="radio1 = 'Imperial'">Imperial</span>
                    <span :class="{ 'active': radio1 == 'Metric' }" @click="radio1 = 'Metric'">Metric</span>
                </div>

                <!-- table  -->
                <table class="table" v-show="radio1 == 'Imperial'">
                    <thead>
                        <tr>
                            <th v-for="(item, index) in expoundSize.imperial.head" :key="index">
                                {{ item }}
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in expoundSize.imperial.body" :key="index">
                            <th v-text="item.key_name" />
                            <td v-for="i in item.value" :key="i.size_id" v-text="i.measure"></td>
                        </tr>
                    </tbody>
                </table>

                <table class="table" v-show="radio1 == 'Metric'">
                    <thead>
                        <tr>
                            <th v-for="(item, index) in expoundSize.metric.head" :key="index">
                                {{ item }}
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in expoundSize.metric.body" :key="index">
                            <th v-text="item.key_name" />
                            <td v-for="i in item.value" :key="i.size_id" v-text="i.measure"></td>
                        </tr>
                    </tbody>
                </table>

                <p>
                    <svg-icon name="notify2" />
                    <span>This size guide shows product measurements taken when products are laid flat. Actual product
                        measurements may vary by up to 1" (2.5cm).</span>
                </p>
            </article>
            <h3>Dimension diagram</h3>
            <div class="guide-diagram">
                <figure>
                    <img v-if="productType == 't-shirts'"
                        v-lazy="'https://img.podpartner.com/static/images-20230614/diagram-t-shirts.png'" alt="">
                    <img v-if="productType == 'long-sleeve'"
                        v-lazy="'https://img.podpartner.com/static/images-20230614/diagram-long-sleeve.png'" alt="">
                    <img v-if="productType == 'hoodies'"
                        v-lazy="'https://img.podpartner.com/static/images-20230614/diagram-hoodies.png'" alt="">
                    <img v-if="productType == 'sweat-shirts'"
                        v-lazy="'https://img.podpartner.com/static/images-20230614/diagram-long-sleeve.png'" alt="">
                    <img v-if="productType == 'tank-tops'"
                        v-lazy="'https://img.podpartner.com/static/images-20230614/diagram-tank-tops.png'" alt="">
                    <img v-if="productType == 'shorts'"
                        v-lazy="'https://img.podpartner.com/static/images-20230614/diagram-shorts.png'" alt="">
                    <img v-if="productType == 'pants'"
                        v-lazy="'https://img.podpartner.com/static/images-20230614/diagram-pants.png'" alt="">
                </figure>
                <!-- 裤子，短裤 -->
                <ul v-if="['shorts', 'pants'].includes(productType)">
                    <li>
                        <h4>A. Outseam</h4>
                        <p>Run the fabric tape from the top of the waistband, along the outer side of the pant leg, all
                            the way down to the bottom of the hem.</p>
                    </li>
                    <li>
                        <h4>B. Waist</h4>
                        <p>Measure across the top edge of the waistband from one corner to the other.The measurement in
                            the size chart refers to twice the width of the waist when laid flat.</p>
                    </li>
                    <template v-if="productType != 'shorts'">
                        <li>
                            <h4>C. Hip</h4>
                            <p>Measure straight across the widest area of the seat of the pants(usually 9” down from the
                                top of the front waistband).The measurement in the size chart refers to twice the width
                                of the hip when laid flat.</p>
                        </li>
                        <li>
                            <h4>D. Leg opening</h4>
                            <p>Lay the bottom cuff flat and measure the width of the cuff.The measurement in the size
                                chart refers to twice the width of the leg opening when laid flat.</p>
                        </li>
                    </template>
                </ul>

                <!-- 衣服 -->
                <ul v-else>
                    <li>
                        <h4>A. Chest</h4>
                        <p>Place the fabric tape 1“ below the armpit, straight across front. Measure from outside edge
                            to outside
                            edge.The measurement in the size chart refers to twice the width of the chest when laid
                            flat.</p>
                    </li>
                    <li>
                        <h4>B. Shoulder</h4>
                        <p>Place the fabric tape from shoulder point to shoulder point, straight across back. Measure
                            from armhole seam
                            to armhole seam.</p>
                    </li>
                    <li>
                        <h4>C. Length</h4>
                        <p>Take the measurement straight down from high point shoulder to the bottom edge of the
                            garment.</p>
                    </li>
                    <li v-if="productType !== 'tank-tops'">
                        <h4>D. Sleeve length</h4>
                        <p>Measure the length from the tip of the shoulder to the bottom edge of sleeve, including cuff.
                        </p>
                    </li>
                </ul>

            </div>
        </div>
    </UxDialog>
</template>
<script>
export default {
    name: "SizeGuideDialog",
    props: ["value", "detail"],
    computed: {
        //构造尺码表
        expoundSize () {
            const imperial = this.detail.english_system || [];
            const metric = this.detail.metric_system || [];
            const result = {
                imperial: { head: [], body: [] },
                metric: { head: [], body: [] },
            }

            imperial.map((item, index) => {
                if (index == 0) {
                    result.imperial.head.push('');
                    item.value.map(item => result.imperial.head.push(item.size_name));
                }
                result.imperial.body.push(item);
            })

            metric.map((item, index) => {
                if (index == 0) {
                    result.metric.head.push('');
                    item.value.map(item => result.metric.head.push(item.size_name));
                }
                result.metric.body.push(item);
            })

            return result
        },
        productType () {
            return this.$getClassifyBySpu(this.detail.spu)
        },
    },
    data () {
        return {
            radio1: "Imperial",
        };
    },
    methods: {
        close () {
            this.$emit("input", null);
        },
    }
};
</script>
<style lang="scss" scoped>
// .guide-dialog::v-deep {
//     & > .dialog-content {
//         & > .dialog-body > .dialog-layout {
//             transition: none;
//             background: none;
//         }
//     }
// }

.guide {
    max-width: 964px;
    width: 100vw;
    box-sizing: border-box;
    padding: 20px;

    &>h2 {
        font-size: 18px;
        font-family: Roboto-Medium;
        font-weight: 500;
        color: #000000;
        line-height: 22px;
        text-align: center;
        margin-bottom: 20px;
    }

    &>h3 {
        width: 100%;
        height: 32px;
        box-sizing: border-box;
        padding: 0 8px;
        background: #f7f7f7;
        border-radius: 8px;
        line-height: 32px;
        font-size: 16px;
        font-family: Roboto-Medium;
        font-weight: 500;
        color: #000000;
    }

    .product-detail-expound-size {
        margin: 16px 0 26px;

        .tablebox-radio {
            display: inline-flex;
            position: relative;

            &::before {
                content: '';
                display: block;
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 1px;
                background-color: #e6e6e6;
            }

            &>span {
                position: relative;
                cursor: pointer;
                text-align: center;
                height: 32px;
                font-size: 14px;
                font-family: Roboto-Medium;
                font-weight: 500;
                color: #555555;
                line-height: 32px;

                &+span {
                    margin-left: 18px;
                }

                &::after {
                    content: '';
                    display: block;
                    position: absolute;
                    bottom: 0px;
                    left: 0;
                    width: 100%;
                    height: 2px;
                    border-radius: 2px;
                    background-color: transparent;
                }

                &.active {
                    color: #ea4c89;

                    &:after {
                        background-color: #ea4c89;
                    }
                }
            }
        }

        &>p {
            display: flex;
            align-items: center;
            padding: 12px 0 6px;

            svg {
                height: 14px;
                width: 14px;
                margin-right: 4px;
                color: #acacac;
            }

            span {
                font-size: 14px;
                font-family: Roboto, Roboto;
                font-weight: 400;
                color: #555555;
                line-height: 16px;
            }
        }

        .table {
            margin: 20px 0 0;

            td {
                text-align: center;
                font-size: 14px;
                font-family: Roboto, Roboto;
                font-weight: 400;
                color: #292929;
                width: 72px;
                height: 42px;
                box-sizing: border-box;
            }

            th {
                text-align: center;
                font-size: 14px;
                font-family: Roboto, Roboto;
                font-weight: 500;
                color: #000000;
            }

            thead th {
                height: 42px;
                background: #f6f6f6;
                border-top: 1px #e6e6e6 solid;

                &:first-child {
                    border-right: 1px #e6e6e6 solid;
                }
            }

            tbody {
                tr:last-child {
                    border-bottom: 1px #e6e6e6 solid;
                }

                tr:nth-child(even) {
                    background: #f7f7f7;
                }

                th {
                    width: 120px;
                    border-right: 1px #e6e6e6 solid;
                }
            }
        }
    }

    .guide-diagram {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        margin: 18px 0 0;

        figure {
            width: 360px;
            height: 360px;
            border-radius: 8px;
            background: #fafafa;
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
            }
        }

        ul {
            margin-left: 28px;
            flex: 1;

            li {
                &+li {
                    margin-top: 14px;
                }

                h4 {
                    font-size: 14px;
                    font-family: Roboto-Medium;
                    font-weight: 500;
                    color: #000000;
                    line-height: 16px;
                }

                p {
                    margin-top: 6px;
                    font-size: 14px;
                    font-family: Roboto, Roboto;
                    font-weight: 400;
                    color: #555555;
                    line-height: 20px;
                }
            }
        }
    }
}

@media (max-width: 960px) {
    .guide {
        padding: 14px 14px 0;

        .guide-diagram {
            flex-wrap: wrap;
            justify-content: center;

            figure {
                margin-bottom: 18px !important;
            }

            ul {
                min-width: 400px;
            }
        }
    }
}
</style>
